﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form>
        <input type="button" value="上一页" />
        <input type="button" value="下一页" />
        <a href="105.html"> zz</a>
        <input type="text" value="" />
        <input type="button" value="跳转" />
    </form>
    <div>
        <form>
            <select name="province">
                <option value="https://localhost:44391/FAQ/Register.html">注册</option>
                <option value="https://localhost:44391/Log/On.html">登录</option>
                <option value="https://localhost:44391/Home.html">首页</option>
            </select>
            <input type="checkbox" value="修改" id="change" />
            <div>文字内容：(*必填)</div>
            <input type="text" value="" id="content" disabled />
            <div>链接：(*必填)</div>
            <input type="text" value="" id="link" disabled />
        </form>
    </div>
    <div></div>
    <keyword id="k3"></keyword>
    <keyword class="k2"></keyword>
    <keyword class="k2"></keyword>
    <keyword class="k2"></keyword>
    <keyword id="k1"></keyword>
    <form>
        <span>---1级---</span>
        <select name="keyword-1">
            <option value="0">编程开发语言</option>
            <option value="1">工具软件</option>
            <option value="2">顾问咨询</option>
            <option value="3">操作系统</option>
        </select>
        <span>---2级---</span>
        <select name="keyword-2">
            <option></option>
            <option></option>
            <option></option>
        </select>
        <input type="text" value="" id="user-defined" />
    </form>
    <script>
        //一个“前一页”按钮，点击可以跳到上一页；一个“下一页”按钮，点击可以跳到下一页；
        document.getElementsByTagName('input')[0].onclick = function () {
            location.href = history.back(1)
        }
        document.getElementsByTagName('input')[1].onclick = function () {
            location.href = history.forward(1)
        }
        //一个a标签，点击不会跳转到href指定页面，而是将href的值赋值给下面的一个文本框，
        document.getElementsByTagName('a')[0].onclick = function (event) {
            event.preventDefault();
            document.getElementsByTagName('input')[2].value = this.href;
        }
        //一个“转到”按钮，点击该按钮页面可跳转到文本框指定的网址页面
        document.getElementsByTagName('input')[3].onclick = function (event) {
            location.href = (document.getElementsByTagName('input')[2].value);
        }
        //参考求助首页侧边栏关键字，实现：当鼠标移动到关键字上，显示关键字被使用次数
        // 参考一起帮首页，实现右侧漂浮并底对齐左侧文本框的效果
        //参考消息页面：完成勾选全选功能

        //参考求助首页侧边栏“免费广告发布”弹出Modal，实现（不需要弹出Modal）：
        //根据下拉列表选中项，填充“文字内容”和“链接”文本框
        //勾选修改的checkbox，实现“文字内容”和“链接”文本框的禁用和启用
        document.getElementsByTagName('select')[0].onclick = function () {
            document.getElementById("content").value = this.selectedOptions[0].innerText
            document.getElementById("link").value = this.selectedOptions[0].value

        };
        document.getElementById("change").onclick = function () {
            var txtContent = document.getElementById("content");
            txtContent.disabled = !txtContent.disabled;
            var txtlink = document.getElementById("link");
            txtlink.disabled = txtContent.disabled;
        }
        //参考发布求助，实现其关键字功能：
        //没有选择一级关键字，不能选择二级关键字
        //选择一级关键字后，二级关键字只能是一级关键字下的子集
        //一级关键字和二级关键字被选中后，会显示在下拉列表上方
        //自定义关键字输入完成后（按空格键），输入的关键字显示在下拉列表上方
        //后输入的关键字显示在前面
        const language = new Map();
        language.set('1', "c#");
        language.set('2', "java");
        language.set('3', "html");
        const tool = new Map();
        tool.set('1', "CAD");
        tool.set('2', "VisualStudio");
        tool.set('3', "IDEA");
        const consult = new Map();
        consult.set('1', "职场");
        consult.set('2', "法律");
        consult.set('3', "财务");
        const operatingsystem = new Map();
        operatingsystem.set('1', "LINUX");
        operatingsystem.set('2', "Android");
        operatingsystem.set('3', "Unix");
        var key1level = new Map();
        key1level.set("0", language);
        key1level.set("1", tool);
        key1level.set("2", consult);
        key1level.set("3", operatingsystem);


        document.getElementsByName("keyword-1")[0].onchange = function () {
            var keyonenum = 0;
            document.getElementById("k1").innerText = this.selectedOptions[0].innerText;
            for (const [key, value] of key1level.get(this.selectedOptions[0].value)) {
                document.getElementsByName("keyword-2")[0].options[keyonenum].innerText = value;
                keyonenum++;
            }
        }
        var keytwonum = 2;
        document.getElementsByName("keyword-2")[0].onchange = function () {
            document.getElementsByClassName("k2")[keytwonum].innerText = this.selectedOptions[0].innerText;
            keytwonum--;
        }

        document.getElementById("user-defined").onkeyup = function (event) {
            if (event.keyCode == 32) {
                document.getElementById("k3").innerText = this.value;
            } //else nothing
        }

    </script>
</body>
</html>